<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jstl/fmt" %>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
    <meta name="author" content="Wee">
    <meta name="renderer" content="webkit">
    <meta name="copyright" content="Wee">
    <meta name="keywords" content="hexo,hexo-theme,hexo-blog">
    <meta name="description" content="fi3ework&#39;s studio">
    <meta http-equiv="Cache-control" content="no-cache">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>${sessionScope.User.nickname}的博客</title>
    <style class="anchorjs"></style>
    <style type="text/css">@font-face {
        font-family: Oswald-Regular;
        src: url(/archer-demo/font/Oswald-Regular.ttf)
    }

    body {
        margin: 0
    }

    .back-top, .container, .sidebar, .site-intro-meta, .toc-wrapper, footer, header {
        display: none
    }

    .site-intro {
        position: relative;
        z-index: 3;
        width: 100%;
        overflow: hidden
    }

    .site-intro-placeholder {
        position: absolute;
        z-index: -2;
        top: 0;
        left: 0;
        width: calc(100% + 300px);
        height: 100%;
        background: repeating-linear-gradient(-45deg, #444 0, #444 80px, #333 80px, #333 160px);
        background-position: center center;
        transform: translate3d(-226px, 0, 0);
        animation: gradient-move 2.5s ease-out 0s infinite
    }

    @keyframes gradient-move {
        0% {
            transform: translate3d(-226px, 0, 0)
        }
        100% {
            transform: translate3d(0, 0, 0)
        }
    }</style>
    <link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css">

    <link rel="stylesheet" href="../../../static/self/style.css" as="style"
          onload="this.onload=null,this.rel=stylesheet">
    <link rel="stylesheet" href="../../../static/self/mobile.css" media="(max-width:980px)">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/Clcss/selfblog.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/Clcss/self.css">
    <link rel="stylesheet" href="../../../Clcss/music.css"/>
    <script src="../../../static/self/webfontloader.min.js"></script>
    <script>!function (n) {
        "use strict";
        n.loadCSS || (n.loadCSS = function () {
        });
        var o = loadCSS.relpreload = {};
        if (o.support = function () {
            var e;
            try {
                e = n.document.createElement("link").relList.supports("preload")
            } catch (t) {
                e = !1
            }
            return function () {
                return e
            }
        }(), o.bindMediaToggle = function (t) {
            var e = t.media || "all";

            function a() {
                t.media = e
            }

            t.addEventListener ? t.addEventListener("load", a) : t.attachEvent && t.attachEvent("onload", a), setTimeout(function () {
                t.rel = "stylesheet", t.media = "only x"
            }), setTimeout(a, 3e3)
        }, o.poly = function () {
            if (!o.support()) for (var t = n.document.getElementsByTagName("link"), e = 0; e < t.length; e++) {
                var a = t[e];
                "preload" !== a.rel || "style" !== a.getAttribute("as") || a.getAttribute("data-loadcss") || (a.setAttribute("data-loadcss", !0), o.bindMediaToggle(a))
            }
        }, !o.support()) {
            o.poly();
            var t = n.setInterval(o.poly, 500);
            n.addEventListener ? n.addEventListener("load", function () {
                o.poly(), n.clearInterval(t)
            }) : n.attachEvent && n.attachEvent("onload", function () {
                o.poly(), n.clearInterval(t)
            })
        }
        "undefined" != typeof exports ? exports.loadCSS = loadCSS : n.loadCSS = loadCSS
    }("undefined" != typeof global ? global : this)</script>
    <link rel="icon" href="http://firework.studio/archer-demo/assets/favicon.ico">
    <link rel="preload" href="../../../static/self/webfontloader.min.js" as="script">
    <link rel="preload" href="../../../static/self/jquery.min.js" as="script">
    <link rel="preload" href="../../../static/self/main.js" as="script">
    <link rel="preload" as="font" href="http://firework.studio/archer-demo/font/Oswald-Regular.ttf" crossorigin="">
    <link rel="preload" as="font" href="https://at.alicdn.com/t/font_327081_1dta1rlogw17zaor.woff" crossorigin="">
    <link rel="stylesheet" href="../../../Clcss/mymusic.css"/>
    <script src="../../../static/self/jquery.fancybox.min.js" defer=""></script>
</head>


<body class="home-body">
<header class="header index-header">
    <div class="read-progress"></div>
    <a href="/cl/selfBlog"><div class="header-sidebar-menu"></div></a>
    <a class="home-link" href="/cl/selfBlog">${sessionScope.User.nickname}</a></header>

<!--主要展示部分-->
<div class="wrapper">
    <div class="site-intro" style="height:50vh">
        <!--大图链接-->
        <div class="site-intro-img" style="background-image:url('../../../img/中北大学图书馆.jpg')"></div>
        <!--图上的字-->
        <div class="site-intro-meta"><h1 class="intro-title intro-fade-in">我的博客</h1>
            <p class="intro-subtitle intro-fade-in">it's better to burn out than to fade away</p></div>
    </div>
    <script>var browser = {
        versions: function () {
            var e = window.navigator.userAgent;
            return {
                userAgent: e,
                trident: -1 < e.indexOf("Trident"),
                presto: -1 < e.indexOf("Presto"),
                webKit: -1 < e.indexOf("AppleWebKit"),
                gecko: -1 < e.indexOf("Gecko") && -1 == e.indexOf("KHTML"),
                mobile: !!e.match(/AppleWebKit.*Mobile.*/),
                ios: !!e.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/),
                android: -1 < e.indexOf("Android") || -1 < e.indexOf("Linux"),
                iPhone: -1 < e.indexOf("iPhone") || -1 < e.indexOf("Mac"),
                iPad: -1 < e.indexOf("iPad"),
                webApp: -1 == e.indexOf("Safari"),
                weixin: -1 == e.indexOf("MicroMessenger"),
                uc: -1 < e.indexOf("UCBrowser")
            }
        }()
    };

    function fontLoaded() {
        if (console.log("font loaded"), document.getElementsByClassName("site-intro-meta")) {
            document.getElementsByClassName("intro-title")[0].classList.add("intro-fade-in"), document.getElementsByClassName("intro-subtitle")[0].classList.add("intro-fade-in");
            var e = document.getElementsByClassName("post-intros")[0];
            e && e.classList.add("post-fade-in")
        }
    }

    function asyncCb() {
        browser.versions.uc ? (console.log("UCBrowser"), fontLoaded()) : WebFont.load({
            custom: {families: ["Oswald-Regular"]},
            loading: function () {
            },
            active: function () {
                fontLoaded()
            },
            inactive: function () {
                console.log("inactive: timeout"), fontLoaded()
            },
            timeout: 5e3
        })
    }

    function asyncErr() {
        console.warn("script load from CDN failed, will load local script")
    }

    function async(e, n, o) {
        var t = document, i = "script", a = t.createElement(i), s = t.getElementsByTagName(i)[0];
        a.src = e, n && a.addEventListener("load", function (e) {
            n(null, e)
        }, !1), o && a.addEventListener("error", function (e) {
            o(null, e)
        }, !1), s.parentNode.insertBefore(a, s)
    }

    console.log("userAgent:" + browser.versions.userAgent);
    var asyncLoadWithFallBack = function (e, n, o) {
        var t = function () {
            o(), e.shift(), e.length && async(e[0], n, t)
        };
        async(e[0], n, t)
    };
    asyncLoadWithFallBack(["https://cdn.jsdelivr.net/npm/webfontloader@1.6.28/webfontloader.min.js", "https://cdn.bootcss.com/webfont/1.6.28/webfontloader.js", "/archer-demo/lib/webfontloader.min.js"], asyncCb, asyncErr)</script>


    <!--展示区-->
    <div class="container">
        <div class="main index-page" id="aboutme">
            <div class="container-sm player-wrap">
                <div id="music-player" class="aplayer"></div>
            </div>
            <div class="main">
                <div class="main-wrap">
                    <div class="content-box article" style="position: relative">
                        <div class="title">
                            <c:if test="${sessionScope.user.uid == music.user.uid}">
                                <a href="${pageContext.request.contextPath}/user/77151/${music.mid}">
                                    <img src="/assets/images/修改音乐.png" id="editmusic" style="float: right;margin: 10px"
                                         height="24" width="24"/>
                                </a>
                            </c:if>
                            <h2>${music.mname} - ${music.mauthor}</h2>
                            <div class="info">
                                <span class="author">${music.user.nickname}</span> / <span class="date">
                        <%--<fmt:formatDate value="${music.muploaddate}" pattern="yy-MM-dd"/>--%>
                        </span>
                            </div>
                        </div>
                        <div class="content">
                            <p>
                                <img width="500px" height="500px" src="${pageContext.request.contextPath}/${music.mpicurl}">
                            </p>
                            <p>
                                ${music.msummary}
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--左侧个人信息与导航栏-->
        <%--<div class="profile">
            <img class="profile-avatar" alt="avatar" src="${pageContext.request.contextPath}/${sessionScope.User.uheadpicurl}">
            <div class="profile-name">${sessionScope.User.nickname}</div>
            <div class="profile-signature">witness me</div>
            <div class="profile-social"><a href="mailto:12345@qq.com" class="iconfont-archer email" title="email"></a>
                <a href="http://github.com/fi3ework" class="iconfont-archer github" target="_blank" title="github"></a>
                <span class="iconfont-archer wechat" title="wechat"><img class="profile-qr"
                                                                         src="../../../static/self/example_qr.png"></span>
            </div>
            <div class="friends">
                <div>FRIENDS</div>
                <span><a href="http://www.baidu.com/" target="_black">friendA</a> </span><span><a
                    href="http://www.google.com/" target="_black">friendB</a></span></div>
            <div class="about-me">
                <a  class="aboutme">ABOUT ME</a>
            </div>
            &lt;%&ndash;http://firework.studio/archer-demo/about&ndash;%&gt;
            <div class="about-me">
                <a href="#">demo1</a>
            </div>
            <div class="about-me">
                <a href="#">demo2</a>
            </div>
        </div>--%>
    </div>
    <footer class="footer">
        <div class="social"><a href="mailto:835234416@qq.com" class="iconfont-archer email" title="email"></a> <a
                href="https://github.com/TyranitarX" class="iconfont-archer github" target="_blank" title="github"></a>
            <span class="iconfont-archer wechat" title="wechat"><img class="profile-qr"
                                                                     src="../../../img/weixin.png"></span>
        </div>
        <div class="copyright"><span id="hexo-power">Powered by <a href="/cl/firstpage"
                                                                   target="_blank">IBlog</a></span><span
                class="iconfont-archer power"></span><span id="theme-info">theme <a
                href="https://github.com/fi3ework/hexo-theme-archer" target="_blank">Archer</a></span></div>
        <div class="busuanzi-container"><span id="busuanzi_container_site_pv">PV: <span
                id="busuanzi_value_site_pv"></span> :)</span></div>
    </footer>
</div>
<div class="back-top iconfont-archer"></div>
<!--左侧slide-->
<%--<div class="sidebar sidebar-hide ps">
    <ul class="sidebar-tabs sidebar-tabs-active-0">
        <li class="sidebar-tab-archives"><span class="iconfont-archer"></span><span class="tab-name">Archive</span>
        </li>
        <li class="sidebar-tab-tags"><span class="iconfont-archer"></span><span class="tab-name">Tag</span></li>
        <li class="sidebar-tab-categories"><span class="iconfont-archer"></span><span class="tab-name">Cate</span></li>
    </ul>
    <div class="sidebar-content sidebar-content-show-archive">
        <div class="sidebar-panel-archives">
            <div class="total-and-search">
                <div class="total-archive">Total : 16</div>
            </div>
            <div class="post-archive">
                <div class="archive-year">2017</div>
                <ul class="year-list">
                    <li class="archive-post-item"><span class="archive-post-date">08/14</span><a
                            class="archive-post-title"
                            href="http://firework.studio/archer-demo/2017-08-14/hexo-theme-archer/">hexo-theme-archer</a>
                    </li>
                </ul>
                <div class="archive-year">2013</div>
                <ul class="year-list">
                    <li class="archive-post-item"><span class="archive-post-date">12/26</span><a
                            class="archive-post-title" href="http://firework.studio/archer-demo/2013-12-26/images/">Images</a>
                    </li>
                    <li class="archive-post-item"><span class="archive-post-date">12/25</span><a
                            class="archive-post-title" href="http://firework.studio/archer-demo/2013-12-25/no-title/">[Untitled
                        Post]</a></li>
                    <li class="archive-post-item"><span class="archive-post-date">12/25</span><a
                            class="archive-post-title"
                            href="http://firework.studio/archer-demo/2013-12-25/tag-plugins/">Tag Plugins</a></li>
                    <li class="archive-post-item"><span class="archive-post-date">12/25</span><a
                            class="archive-post-title" href="http://firework.studio/archer-demo/2013-12-25/videos/">Videos</a>
                    </li>
                    <li class="archive-post-item"><span class="archive-post-date">12/25</span><a
                            class="archive-post-title"
                            href="http://firework.studio/archer-demo/2013-12-25/gallery-post/">Gallery Post</a></li>
                    <li class="archive-post-item"><span class="archive-post-date">12/25</span><a
                            class="archive-post-title" href="http://firework.studio/archer-demo/2013-12-25/excerpts/">Excerpts</a>
                    </li>
                    <li class="archive-post-item"><span class="archive-post-date">12/24</span><a
                            class="archive-post-title"
                            href="http://firework.studio/archer-demo/2013-12-24/tags/">Tags</a></li>
                    <li class="archive-post-item"><span class="archive-post-date">12/24</span><a
                            class="archive-post-title" href="http://firework.studio/archer-demo/2013-12-24/elements/">Elements</a>
                    </li>
                    <li class="archive-post-item"><span class="archive-post-date">12/24</span><a
                            class="archive-post-title"
                            href="http://firework.studio/archer-demo/2013-12-24/%E6%97%A5%E6%9C%AC%E8%AA%9E%E3%83%86%E3%82%B9%E3%83%88/">日本語テスト</a>
                    </li>
                    <li class="archive-post-item"><span class="archive-post-date">12/24</span><a
                            class="archive-post-title"
                            href="http://firework.studio/archer-demo/2013-12-24/%E4%B8%AD%E6%96%87%E6%B8%AC%E8%A9%A6/">中文測試</a>
                    </li>
                    <li class="archive-post-item"><span class="archive-post-date">12/24</span><a
                            class="archive-post-title" href="http://firework.studio/archer-demo/2013-12-24/link-post/">Link
                        Post</a></li>
                    <li class="archive-post-item"><span class="archive-post-date">12/24</span><a
                            class="archive-post-title"
                            href="http://firework.studio/archer-demo/2013-12-24/link-post-without-title/">www.google.com</a>
                    </li>
                    <li class="archive-post-item"><span class="archive-post-date">12/24</span><a
                            class="archive-post-title" href="http://firework.studio/archer-demo/2013-12-24/long-title/">Lorem
                        ipsum dolor sit amet, consectetur adipiscing elit. Aliquam justo turpis, tincidunt ac convallis
                        id.</a></li>
                    <li class="archive-post-item"><span class="archive-post-date">12/24</span><a
                            class="archive-post-title" href="http://firework.studio/archer-demo/2013-12-24/categories/">Categories</a>
                    </li>
                    <li class="archive-post-item"><span class="archive-post-date">12/24</span><a
                            class="archive-post-title"
                            href="http://firework.studio/archer-demo/2013-12-24/hello-world/">Hello World</a></li>
                </ul>
            </div>
        </div>
        <div class="sidebar-panel-tags">
            <div class="sidebar-tags-name"><span class="sidebar-tag-name" data-tags="hexo"><span
                    class="iconfont-archer"></span>hexo</span> <span class="sidebar-tag-name"
                                                                      data-tags="hexo-theme-archer"><span
                    class="iconfont-archer"></span>hexo-theme-archer</span> <span class="sidebar-tag-name"
                                                                                   data-tags="Foo"><span
                    class="iconfont-archer"></span>Foo</span> <span class="sidebar-tag-name" data-tags="Bar"><span
                    class="iconfont-archer"></span>Bar</span> <span class="sidebar-tag-name" data-tags="Baz"><span
                    class="iconfont-archer"></span>Baz</span></div>
            <div class="iconfont-archer sidebar-tags-empty"></div>
            <div class="sidebar-tags-list"></div>
        </div>
        <div class="sidebar-panel-categories">
            <div class="sidebar-categories-name"><span class="sidebar-category-name" data-categories="Foo"><span
                    class="iconfont-archer"></span>Foo</span> <span class="sidebar-category-name"
                                                                     data-categories="Foo/Bar"><span
                    class="iconfont-archer"></span>Foo/Bar</span> <span class="sidebar-category-name"
                                                                         data-categories="Foo/Bar/Baz"><span
                    class="iconfont-archer"></span>Foo/Bar/Baz</span></div>
            <div class="iconfont-archer sidebar-categories-empty"></div>
            <div class="sidebar-categories-list"></div>
        </div>
    </div>
    <div class="ps__rail-x" style="left: 0px; top: 0px;">
        <div class="ps__thumb-x" tabindex="0" style="left: 0px; width: 0px;"></div>
    </div>
    <div class="ps__rail-y" style="top: 0px; left: 0px;">
        <div class="ps__thumb-y" tabindex="0" style="top: 0px; height: 0px;"></div>
    </div>
</div>--%>


<script>var siteMeta = {root: "/archer-demo/", author: "Wee"}</script>
<script src="../../../static/self/jquery.min.js"></script>
<script type="text/javascript">void 0 === window.$ && (console.warn("jquery load from jsdelivr failed, will load local script"), document.write('<script src="/archer-demo/lib/jquery.min.js"><\/script>'))</script>
<script src="../../../static/self/main.js"></script>
<script async="" src="../../../static/self/busuanzi.pure.mini.js"></script>
<script src="${pageContext.request.contextPath}/js/jquery.min.js"></script>
<script src="${pageContext.request.contextPath}/lib/marked.min.js"></script>
<script src="${pageContext.request.contextPath}/lib/prettify.min.js"></script>
<script src="${pageContext.request.contextPath}/lib/raphael.min.js"></script>
<script src="${pageContext.request.contextPath}/lib/underscore.min.js"></script>
<script src="${pageContext.request.contextPath}/lib/sequence-diagram.min.js"></script>
<script src="${pageContext.request.contextPath}/lib/flowchart.min.js"></script>
<script src="${pageContext.request.contextPath}/lib/jquery.flowchart.min.js"></script>
<script src="${pageContext.request.contextPath}/js/editormd.js"></script>
<script src="../../../js/toolkit.js"></script>
<script src="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="../../../js/self.js"></script>
<script src="http://cdn.bootcss.com/aplayer/1.5.8/APlayer.min.js"></script>
<script>
    var is_first = true;
    var ap = new APlayer({
        element: document.getElementById('music-player'), // Optional, player element
        narrow: false,                                    // Optional, narrow style
        autoplay: false,                                   // Optional, autoplay song(s), not supported by mobile browsers
        showlrc: 0,                                       // Optional, show lrc, can be 0, 1, 2, see: ###With lrc
        mutex: true,                                      // Optional, pause other players when this player playing
        theme: '#B72712',                                 // Optional, theme color, default: #b7daff
        mode: 'circulation',                              // Optional, play mode, `random` `single` `circulation`(loop) `order`(no loop), default: `circulation`
        preload: 'none',                              // Optional, the way to load music, can be 'none' 'metadata' 'auto', default: 'auto'
        listmaxheight: '513px',                           // Optional, max height of play list
        music: {                                          // Required, music info
            title: '${music.mname}',                                 // Required, music title
            author: '${music.mauthor}',                          // Required, music author
            url: '${pageContext.request.contextPath}/${music.murl}',  // Required, music url
            pic: '${pageContext.request.contextPath}/${music.mpicurl}'  // Optional, music picture
        }
    });
    function changepic(obj) {
        //console.log(obj.files[0]);//这里可以获取上传文件的name
        var newsrc = getObjectURL(obj.files[0]);
        document.getElementById('himg').src = newsrc;
    }
    //建立一個可存取到該file的url
    function getObjectURL(file) {
        var url = null;
        // 下面函数执行的效果是一样的，只是需要针对不同的浏览器执行不同的 js 函数而已
        if (window.createObjectURL != undefined) { // basic
            url = window.createObjectURL(file);
        } else if (window.URL != undefined) { // mozilla(firefox)
            url = window.URL.createObjectURL(file);
        } else if (window.webkitURL != undefined) { // webkit or chrome
            url = window.webkitURL.createObjectURL(file);
        }
        return url;
    }
</script>
<script src="../../../js/gallery.js"></script>

</body>
</html>